<template>
  <view class="jd-list">
	<view class="tabs">
		<view @click="studentList(1)"><uni-icons type="smallcircle" :color="tabIndex==1?'#55acee':'#666'" size="40rpx"></uni-icons>绑定申请</view>
		<view @click="studentList(2)"><uni-icons type="smallcircle" :color="tabIndex==2?'#55acee':'#666'" size="40rpx"></uni-icons>解绑申请</view>
	</view>
    <view class="search-stu">
      <input type="text" :value="search_text" @input="searchInput" placeholder="输入姓名/学号搜索" placeholder-style="color: #d7d7d7" />
      <image class="icon" src="/static/search.png" @click="studentList()" mode="aspectFit"></image>
    </view>
    <view class="item" v-for="(item, i) in pairStudent" :key="i">
      <view class="left">
        <image :src="utils.headImage(item)" @click="utils.userDetails(item.accountId || item.studentId, 2)" mode="aspectFill"></image>
        <view class="name-grade">
          <text>{{item.name}}</text>
          <view class="grade-cla">
            <view class="student-no">学号：{{item.studentNo}}</view>
            <text>{{orgGraders[item.clasId]}}</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="" v-if="item.state==1">
          <text class="btn show-list-btn" @click="pairConfirm(item, 2)">通过</text>
          <text class="btn refuse show-list-btn" @click="pairConfirm(item, 3)">拒绝</text>
        </view>
        
        <view v-else style="white-space: nowrap;">
          <text class="btn" style="font-size: 24rpx;">{{item.state==2?'已通过':item.state==3?'已拒绝':'已过期'}}</text>
        </view>
      </view>
    </view>
    <uni-load-more :status="load_more"></uni-load-more>
  </view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
  components: {
    uniLoadMore
  },
  data() {
    return {
		search_text: '',
		baseInfo: getApp().globalData.baseInfo,
		orgGraders: {},
		stu_exam_page: 1,
		pairStudent: [],
		load_more: 'more',
		tabIndex: 1
    }
  },
  onLoad(options){
		this.tabIndex = options.pairType || 1
		// #ifdef H5
		let node = document.getElementsByClassName('message-prompt')[0]
		if(node){
			document.body.removeChild(node);
		}
		// #endif
		
	uni.$on('uncheckNumber', this.studentList)
    this.studentList(this.tabIndex)
  },
  onUnload(){
	uni.$off('uncheckNumber', this.studentList)
  },
  onReachBottom(){
    if(this.load_more == 'no-more') return;
    this.stu_exam_page++;
    if(this.tabIndex==1){
		this.getPairStu()
	}else{
		this.getcancelPair()
	}
  },
  methods: {
    searchInput(e){
      this.search_text = e.detail.value;
    },
    // 结对列表
			studentList(i){
				let type = getApp().globalData.taskPageIndex;
				getApp().globalData.taskPageIndex = -1
				getApp().globalData.teamMembersPairType = -1
				if(type>0){
					this.tabIndex = type;
				}else{
					this.tabIndex = i?i:this.tabIndex
				}
				
				this.stu_exam_page = 1;
				this.pairStudent = [];
				if(this.tabIndex==1){
					this.getPairStu()
				}else{
					this.getcancelPair()
				}
				
			},
			getcancelPair(){
				
				this.load_more = 'loading';
				let keyWord = this.search_text || '';
				this.api.get('tPair/cancelPairPage', {
					keyWord: keyWord,
					page: this.stu_exam_page,
					limit: 20
				}).then(res=>{
					this.isData = true;
					uni.stopPullDownRefresh();
					if(res.data.state!='ok') {
						this.load_more = 'no-more'
						return;
					};
					
					let list = res.data.cancelPairList;
					this.pairStudent = this.pairStudent.concat(list);
					if(list.length<20){
						this.load_more = 'no-more';
					}
				})
			},
			getPairStu(){
				this.load_more = 'loading';
				let keyWord = this.search_text || '';
				this.api.get('tPair/pairStudentPage', {
					keyWord: keyWord,
					page: this.stu_exam_page,
					limit: 20
				}).then(res=>{
					this.isData = true;
					uni.stopPullDownRefresh();
					if(res.data.state!='ok') {
						this.load_more = 'no-more'
						return;
					};
					
					if(Object.keys(this.orgGraders).length==0){
						this.baseInfo = getApp().globalData.baseInfo
						let newOrgGraders = this.baseInfo.newOrgGraders || [];
						for(let i=0; i<newOrgGraders.length; i++){
							Object.assign(this.orgGraders, newOrgGraders[i])
						}
					}
					let list = res.data.tsPage.list;
					list = list.reverse()
					this.pairStudent = this.pairStudent.concat(list);
					if(list.length<20){
						this.load_more = 'no-more';
					}
				})
			},
      
			pairConfirm(item, state){
				uni.showLoading({mask: true})
				let path = '', id = ''
				if(this.tabIndex==1){
					id = item.pairId
					path = 'tPair/pairConfirm'
				}else{
					id = item.id
					path = 'tPair/pairCancelConfirm'
				}
				this.api.post(path, {
					pairId: id,
					state: state
				}).then(res=>{
					if(res.data.state == 'ok'){
						
						let dsh = getApp().globalData.bdxs_shbyrwdss;
						let deleteI = dsh.bdxs.indexOf(item.id);
						
						if(deleteI!=-1){
							dsh.bdxs.splice(deleteI, 1)
						}
						
						getApp().globalData.bdxs_shbyrwdss = dsh;
						item.state = state;
						uni.$emit('getMsgTips', res => {})
					}
				})
			},
			pairCancelConfirm(item, state){
				this.api.post('tPair/pairCancelConfirm', {
					pairId: item.pairId,
					state: state
				}).then(res=>{

				})
			}
  }
}
</script>
<style lang="less" scoped>
  // 结对列表
	.jd-list{
    padding: 32rpx;
	.tabs{
		margin: 0 64rpx;
		display: flex;
		justify-content: space-evenly;
		font-size: 28rpx;
		.uni-icons{
			vertical-align: text-top;
		}
	}
    .search-stu{
			border-bottom: 2rpx solid #f2f2f2;
			display: flex;
			align-items: center;
			height: 35px;
			box-sizing: border-box;
      margin-bottom: 24rpx;
			image{
				width: 52rpx;
				height: 52rpx;
			}
      input{
				padding-left: 10rpx;
				width: 90%;
			}
		}
		.item{
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 76rpx;
				height: 76rpx;
				margin-right: 32rpx;
				border-radius: 10rpx;
			}
			.left{
				width: 69%;
				display: flex;
				align-items: center;
			}
			.name-grade{
				width: calc(100% - 108rpx);
				font-size: 24rpx;
				line-height: 36rpx;
			}
			.grade-cla{
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					white-space: nowrap;
				}
			}
			.student-no{
				display: none;
				margin-right: 24rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.right{
				min-width: 27%;
				text-align: center;
				white-space: nowrap;
			}
			.btn{
				padding: 0 16rpx;
				&.refuse{
					margin-left: 16rpx;
					color: #7f7f7f;
					background: #d7d7d7;
				}
			}
		}
		.detailsP{
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600rpx;
			min-height: 300rpx;
			padding: 48rpx;
			border-radius: 24rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.name-grade{
				font-size: 32rpx;
				// text-align: center;
				text{
					margin-left: 16rpx;
					font-size: 10px;
				}
			}
			.desc{
				margin: 48rpx 0;
			}
			.time{
				margin-top: 20rpx;
				// text-align: right;
			}
			.btn{
				margin-top: 48rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text{
					width: 160rpx;
					height: 66rpx;
					line-height: 66rpx;
					background: #FFFFFF;
					text-align: center;
					border-radius: 16rpx;
				}
				.refused{
					border: 2rpx solid #ccc;
					
				}
				.through {
					background: #8FE1EC;
					color: #FFFFFF;
				}
			}
		}
	}
</style>